<section class="content-header" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
         xmlns:th="http://www.thymeleaf.org">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">产品管理</a></li>
        <li class="active">产品列表</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="prodStatus">状态:</label>
                    <div class="col-xs-8">
                        <!--                        <input type="text" class="form-control" id="prodStatus">-->
                        <select name="prodStatus" id="prodStatus" class="form-control">
                            <option value="1">正常状态</option>
                            <option value="0">终止状态</option>
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="prodName">产品名称:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="prodName">
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="prodType">产品类型:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="prodType">
                    </div>
                </div>
                <shiro:hasPermission name="product:list">
                    <div class="col-md-1 col-sm-6 " style="text-align:left;">
                        <button type="button" id="btn_query" class="btn btn-info">查询</button>
                    </div>
                </shiro:hasPermission>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">

            <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal"
                    data-target="#addProductModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_batch_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
            </button>

        </div>
        <table id="table"></table>
    </div>
</section>
<!-- 产品新增模态框 -->
<div id="addProductModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <!--        user新增按钮页面-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增产品</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addProProductForm">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品名称 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="prodName" class="form-control" min="1" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品类型 <span
                                    style="color: #ff0000">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="prodType" class="form-control" min="1" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">等级、批次 :</label>
                            <div class="col-sm-8">
                                <input name="prodBatch" class="form-control" min="1" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品单位 :</label>
                            <div class="col-sm-8">
                                <input name="prodUnit" class="form-control" min="1" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品价格 :</label>
                            <div class="col-sm-8">
                                <input name="prodPrice" class="form-control" min="1" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品备注 :</label>
                            <div class="col-sm-8">
                                <input name="prodMemo" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品状态 :</label>
                            <div class="col-sm-8">
<!--                                <input name="prodStatus" class="form-control" min="1" placeholder="">-->
                                <select name="prodStatus" class="form-control">
                                    <option value="1">正常</option>
                                    <option value="0">停止</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveAddProduct" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 产品编辑模态框 -->
<div id="editProductModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <!--        user新增按钮页面-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑产品</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="editProProductForm">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="prod-Code">产品编号 <span
                                    style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="prodCode" id="prod-Code" class="form-control" min="1" placeholder=""
                                       readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="prod-Name">产品名称 <span
                                    style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="prodName" id="prod-Name" class="form-control" min="1" placeholder=""
                                       readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="prod-Type">产品类型 <span
                                    style="color: #ff0000">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="prodType" id="prod-Type" class="form-control" min="1" placeholder=""
                                       readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="prod-Batch">等级、批次 :</label>
                            <div class="col-sm-8">
                                <input name="prodBatch" id="prod-Batch" class="form-control" min="1" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="prod-Unit">产品单位 :</label>
                            <div class="col-sm-8">
                                <input name="prodUnit" id="prod-Unit" class="form-control" min="1" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="prod-Price">产品价格 :</label>
                            <div class="col-sm-8">
                                <input name="prodPrice" id="prod-Price" class="form-control" min="1" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="prod-Memo">产品备注 :</label>
                            <div class="col-sm-8">
                                <input name="prodMemo" id="prod-Memo" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="prod-Status">产品状态 :</label>
                            <div class="col-sm-8">
                                <select name="prodStatus" id="prod-Status" class="form-control">
                                    <option value="1">正常</option>
                                    <option value="0">终止</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveEditProduct" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    var editFlag = "[[${@perms.hasPerm('product:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('product:delete')}]]";
    // var assignRoleFlag="[[${@perms.hasPerm('customer:assignRole')}]]";
    var proProduceIdStr;//批量用户id
    var roleIdStr;//分配的角色
    var selectRoleIds;
    var customerIdChecked;
    var loadRoleCount = 0;
    var columns = [
        {checkbox: true},
        {
            field: 'prodName',
            title: '产品名',
            align: "center"
        }, {
            field: 'prodType',
            title: '产品型号',
            align: "center"
        }, {
            field: 'prodBatch',
            title: '级别',
            align: "center"
        }, {
            field: 'prodPrice',
            title: '价格',
            align: "center"
        }, {
            field: 'prodMemo',
            title: '备注',
            align: "center"
        }, {
            field: 'prodStatus',
            title: '状态',
            align: "center",
            formatter: function (value, row, index) {
                return row.prodStatus == '1' ? "<p style='color: green'>正常</p>" : "<p style='color: red'>停止</p>";
            }
        }, {
            field: 'operation',
            title: '操作',
            align: "center",
            formatter: function (value, row, index) {
                var edit = editFlag == "true" ? "<a class='table-btn table-btn-info' href='javascript:void(0)' onclick='editProDuct(" + JSON.stringify(row) + ")'>编辑</a>" : "";
                // var del = deleteFlag == "true" ? '<a  class="table-btn table-btn-danger" href="javascript:void(0)" onclick="deleteUser(' + row.prodId + ')">删除</a>' : '';
                return edit;
            }
        }];
    var options = {
        id: "#table",
        url: '/product/list',
        columns: columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams: queryParams
    }
    Core.initTable(options);
    /*查询用户参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            prodStatus: $("#prodStatus").val(),
            prodName: $("#prodName").val(),
            prodType: $("#prodType").val(),
        };
        return temp;
    }
    //编辑产品模态框
    function editProDuct(object) {
        $("#prod-Code").val(object.prodCode);
        $("#prod-Name").val(object.prodName);
        $("#prod-Type").val(object.prodType);
        $("#prod-Batch").val(object.prodBatch);
        $("#prod-Unit").val(object.prodUnit);
        $("#prod-Price").val(object.prodPrice);
        $("#prod-Memo").val(object.prodMemo);
        $("#prod-Status").val(object.prodStatus);
        $("#editProductModal").modal("show");
    }
    $(function () {
        /*查询*/
        $("#btn_query").click(function () {
            Core.refreshTable("#table");
        });
        //增加产品
        $("#btn_add").click(function () {
            Core.clearError("#addProductModal");
        });
        //批量更改状态
        $("#btn_batch_delete").click(function () {
            var checkedRows = Core.selectMutiData("#table");
            if (checkedRows) {
                Core.confirm("确定删除选中的" + checkedRows.length + "条记录？", function () {
                    var prodCodeStr = getprodCodeStr(checkedRows);
                    Core.postAjax("/product/batch/delete", {"proProduceIdStr": prodCodeStr}, function (data) {
                        if (data.status == 200) {
                            layer.msg(data.msg);
                            Core.refreshTable("#table");
                        }else{
                            layer.msg(data.msg);
                        }
                    }, "get")
                })
            }
        });
        //保存新增产品
        $("#saveAddProduct").click(function () {
            if (doValidForm("#addProProductForm")) {
                var serialize = $("#addProProductForm").serialize();
                Core.mask("#saveAddProduct");
                Core.postAjax("/product/add",serialize, function (data) {
                    Core.unmask("#saveAddProduct");
                    if (data.status == 200) {
                        clear("#addProductModal");
                        Core.refreshTable("#table");
                        $("#addProductModal").modal("hide");
                        layer.msg(data.msg);
                    } else {
                        layer.msg(data.msg);
                    }
                })
            }
        });
        //保存编辑产品
        $("#saveEditProduct").click(function () {
            console.log($("#editProProductForm").serialize());
            if (doValidForm("#editProProductForm")) {
                Core.mask("#saveEditProduct");
                Core.postAjax("product/edit", $("#editProProductForm").serialize(), function (data) {
                    Core.unmask("#saveEditProduct");
                    if (data.status == 200) {
                        $("#editProductModal").modal("hide");
                        clear("#editProductModal");
                        Core.refreshTable("#table");
                        layer.msg(data.msg);
                    } else {
                        layer.msg(data.msg);
                    }
                })
            }
        })
        //清空表单内数据
        function clear(modal) {
            $(modal).find("form").trigger("reset");
        }
        //获取列表选中的编号
        getprodCodeStr = function (checkedRows) {
            var prodCodeStr = "";
            $.each(checkedRows, function (i, item) {
                prodCodeStr += (item.prodCode + ",");
            })//把选中的id组成字符串
            prodCodeStr = prodCodeStr.substring(0, prodCodeStr.length - 1);
            return prodCodeStr;
        }
    });
</script>